<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <link rel="shortcut icon"  th:href="@{/resource/favicon.ico}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <META http-equiv="Pragma" content="no-cache">
    <META http-equiv="Cache-Control" content="no-cache">
    <META http-equiv="Expire" content="0">
    <title th:text="login"></title>

    <link th:href="@{/resource/css/bootstrap.min.css}"
          rel="stylesheet"/>
    <link th:href="@{/resource/css/ace.min.css}" rel="stylesheet"/>
    <link rel="stylesheet"
          th:href="@{/resource/css/font-awesome.min.css}"/>
    <script th:src="@{/resource/js/jquery-1.11.0.min.js}"></script>

    <script th:src="@{/resource/js/bootstrap.min.js}"></script>
    <script th:src="@{/resource/js/bootbox.min-5.3.2.js}"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
    <script th:src="@{/resource/js/html5shiv.js}"></script>
    <script th:src="@{/resource/js/respond.min.js}"></script>
    <![endif]-->
    <!--[if IE ]>
    <script th:src="@{/resource/js/jquery.placeholder.ie.js}"></script>
    <![endif]-->
    <style>
        body {
            margin: 0;
            font-size: 18px;
            font-family: Arial;
            background: #d6dedf url([[${_contextPath}]]/resource/images/body_bg.gif) repeat-x left top;
            color: #333333;
        }

        .main {
            width: 1000px;
            background: url([[${_contextPath}]]/resource/images/main_bg.jpg);
            min-height: 485px;
            margin: 0 auto;
            padding-top: 160px;
        }

        .login {
            /*background: url([[${_contextPath}]]/resource/images/login_bg.png) no-repeat;*/
            width: 707px;
            height: 461px;
            margin: 0 auto;
            padding-top: 15px;
        }

        .login .title_1 {
            height: 82px;
            line-height: 82px;
        }

        .form {
            margin-left: 125px;
            padding-top: 30px;
        }
    </style>

    <script type="text/javascript">

        var base_url = "[[@{/}]]";

        //如果不是顶级页面，就重新跳转到顶级页面打开
        if(window.top != window.self){
            window.open(base_url,"_top");
        }


        $(function () {
            $("#resetBtn").on("click", function () {
                $("#j_username").val("");
                $("#j_password").val("");
                $("#j_code").val("");
            });
            $("#submitBtn").on("click", validate);
        });

        function falert(tit, msg, obj) {
            var box = bootbox.alert({
                size: 'small',
                title: tit,
                message: '<p>' + msg + '</p>'
            });
            if(obj!=null){
                box.on('hidden.bs.modal', function () {
                    $(obj).focus();
                });
            }
        }


        function validate() {
            var username = $("#j_username").val();
            if (username == "") {
                falert('系统警告','[[#{login.username.check}]]','#j_username');
                // var username_check = bootbox.alert('[[#{login.username.check}]]');
                // //关闭窗口时做的事情
                // username_check.on('hidden.bs.modal', function () {
                //     $("#j_username").focus();
                // });
                return;
            }
            var password = $("#j_password").val();
            if (password == "") {
                falert('系统警告','[[#{login.passwd.check}]]','#j_password');
                return;
            }
            var code = $("#j_code").val();
            if (code == "") {
                falert('系统警告','[[#{login.checkkey.check}]]','#j_code');
                return;
            }
            $("#foo").submit();
        }

        function checkKey() {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == 13) {
                validate();
            }
        }
    </script>
<body>


<div class="main" onkeydown="checkKey()">
    <div class="login">
        <div class="title_1">
            <div style="text-align: center;">
					<span class="btn  btn-primary no-hover "
                          style="width: auto; font-size: 30px;" th:text="#{common.htitle}">
                    </span>
            </div>
        </div>
        <div class="form">
            <form id="foo" th:action="@{/j_spring_security_check}" method="post"
                  class="form-horizontal" role="form">


                <div class="form-group">
                    <div class="col-sm-3 text-right no-padding-right">
                        <label for="j_username"
                               class=" control-label label label-xlg label-primary arrowed-in"
                               th:text="#{system.userEntity.name}"></label>
                    </div>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" name="j_username"
                               id="j_username" th:placeholder="#{system.userEntity.name}">
                    </div>
                    <div class="col-sm-2"></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3 text-right no-padding-right">
                        <label for="j_password"
                               class=" control-label  label label-xlg label-primary arrowed-in"
                               th:text="#{userEntity.detail.password}"></label>
                    </div>
                    <div class="col-sm-7">
                        <input type="password" class="form-control" name="j_password"
                               id="j_password" th:placeholder="#{userEntity.detail.password}">
                    </div>
                    <div class="col-sm-2"></div>
                </div>

                <div class="form-group">
                    <div class="col-sm-3 text-right no-padding-right">
                        <label for="j_code"
                               class=" control-label  label label-xlg label-primary arrowed-in"
                               th:text="#{login.checkkey.name}"></label>
                    </div>
                    <div class="col-sm-4 ">
                        <input type="text" class="form-control" name="j_code"
                               id="j_code" th:placeholder="#{login.checkkey.name}">

                    </div>
                    <div class="col-sm-5 no-padding">
                        <a href="javascript:void(0);" onclick="getNewkey()" th:title="#{login.image.alt}"> <img
                                id="yzkey" width="80px" height="30px" align="bottom" border="0"
                                th:src="@{/checkcode/bimage}"> </a>


                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-3 text-right no-padding-right">
                        <select id="language_show">
                            <option value=""><small th:text="#{common.language}"></small></option>
                            <option value="zh_CN"><small th:text="#{common.language.chinese}"></small></option>
                            <option value="en_US"><small th:text="#{common.language.english}"></small></option>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <input type="checkbox" value="true" name="_spring_security_remember_me"
                               id="_spring_security_remember_me" style="height: 20px;width: 10%;"
                               th:text="#{login.remember.notice}">

                    </div>

                    <div class="col-sm-3">

                    </div>

                </div>


                <div class="row" style="margin-top: 20px;">
                    <div class="col-sm-1"></div>
                    <div class="col-sm-5">
                        <button type="button" class="btn btn-primary btn-lg btn-block"
                                id="submitBtn" th:text="#{common.login}"></button>
                    </div>
                    <div class="col-sm-5">
                        <button type="button" class="btn btn-default btn-lg btn-block"
                                id="resetBtn" th:text="#{common.reset}"></button>
                    </div>
                    <div class="col-sm-1"></div>

                </div>


            </form>
            <input type="hidden" id="sErrorCause" name="sErrorCause"
                   th:value="${sErrorCause}"/>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    jQuery(function ($) {
        var sErrorCause = $("#sErrorCause").val();
        if (sErrorCause != "") {
            //$(".tips span").show();
            if ("1" == sErrorCause) {
                falert('系统警告','[[#{login.error.check}]]');
            } else if ("2" == sErrorCause) {
                falert('系统警告','[[#{login.checkkey.error}]]','#j_code');
            }
        }

        var language = '[[${#locale}]]';
        // alert(language);
        $("#language_show").val(language);

        $("#language_show").change(function () {
            var locale = $("#language_show").val();
            //alert(locale);
            if (locale != "") {
                window.open("[[${_contextPath}]]/login.do?locale=" + locale, "_self");
            }
        });

    });

    //刷新验证码
    function getNewkey() {
        jQuery("#yzkey").attr("src", "[[${_contextPath}]]/checkcode/bimage?tem=" + Math.floor(Math.random() * 100)).fadeIn();
        //var tem = jQuery("#foo").serialize();
        //window.open("${_contextPath}/login.do?"+tem,"_self");
    }
</script>
</html>
